<template>
  <div>
    <img class="headerimg" src="https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/bannner/1901/learn.png"
      alt="">
    <van-cell-group>
      <van-field v-model="username" required clearable autofocus label="用户名" right-icon="question-o" placeholder="请输入用户名"
        @click-right-icon="$toast('question')" />

      <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="message" label="留言" type="textarea" placeholder="请输入留言" rows="5" :autosize="autosize" />
    </van-cell-group>
    <van-cell-group>
      <van-button type="primary" size="large" @click="submitForm">注册</van-button>
    </van-cell-group>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      sms: '',
      message: '',
      autosize: { maxHeight: 100, minHeight: 50 }
    }
  },
  methods: {
    submitForm () {
      this.axios.get('/api/register', { params: { username: this.username, password: this.password } }).then(res => {
        this.$toast(res.message)
      }).catch((error) => {
        this.$toast(error)
      })

    }
  }
}
</script>
<style scoped>
.headerimg {
  height: 150px;
  width: 100%;
}
</style>
